<template>
  <div class="event_detailss clearfix">
    
    <div class="head_first">
      <div class="pictrue">
        <img :src="result.CoverPicture" alt="">
      </div>

      <div class="title">
        <h2>{{result.Theme}}</h2>
        <div class="participation">
          <div>
            <span class="iconfont icon-Artboard"></span> 浏览{{result.ClickCount}}次</div>
          <div>
            <span class="iconfont icon-fenxiang"></span> 分享{{result.ShareCount}}次</div>
          <div>
            <span class="iconfont icon-baoming"></span>已报名{{result.ActivityApplyCount}}次</div>
        </div>
      </div>
    </div>
    <div class="carousel">

      <el-carousel :interval="4000" type="card" height="180px" indicator-position="none" arrow="never">
        <el-carousel-item v-for="item in carouselData.data">
          <!-- 地址 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-if="item.sign==='site'">
          
            <div>
              <div class="ico">
                <span class="iconfont icon-jiangpinduihuan">

                </span>
              
              </div>
              <p class="subtitle">活动地点</p>
            </div>
            <p class="content">{{result.SiteName}}</p>
            <div class="examine">点击查看地图</div>
          </div>
          <!-- 奖励 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-else-if="item.sign==='gif'">


      <div>
              <div class="ico">
                <span class="iconfont icon-shijian"></span>
              </div>
              <p class="subtitle">活动奖励</p>
            </div>
            <p class="content" v-show="rewardList">{{rewardList[0]}}</p>
            
            <div class="examine">点击查看地图</div>


           
          </div>
          <!-- 时间 -->
          <div class="nini" v-on:click="handleClick(item.sign)" v-else-if="item.sign==='time'">



            
               <div>
              <div class="ico">
                <span class="iconfont icon-didian"></span>
              </div>
              <p class="subtitle">活动时间</p>
            </div>
            <p class="content">{{result.StartTime}}</p>
             <p class="content">{{result.EndTime}}</p>
            <div class="examine">点击查看地图</div>
 
 
      
          </div>

        </el-carousel-item>
      </el-carousel>

    </div>

  <div class="comment">
      <h2>
        <div class="right">活动详情</div>


      </h2>
      <div class="inner">
      <ul ref="review" id="details">
      <div class="editor_text" ref="editor_text" v-html="result.Details"></div>   
      <div class="check_more" ref="check_more" id="check_more" v-on:click="loadMore_img()" >查看更多</div> 
      </ul>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <h2>
        <div class="right">评论({{lists?lists.length:0}})</div>

        <div class="left" v-on:click="reverts($event)">
          <span class="iconfont icon-pinglun"> </span>
          评论
        </div>
      </h2>
      <div class="inner">
      <ul class="review" ref="review">
        <li class="users" v-for="item_25 in lists" v-on:click="reverts($event, item_25.UserID)">
          <div class="head">
            <img src="~src/images/aimer.jpg" alt="">
          </div>
          <div class="content">
            <p class="user_name">{{item_25.Name}}</p>
            <div class="inner">
              <div class="word"><span class="to-name" v-show="item_25.ToName">{{item_25.ToName}} </span>{{item_25.Content}}</div>
              <p class="say_time">2017年08月21日 10:30:26</p>
             
            </div>
          </div>
        </li>
         <div class="check_more" ref="check_more" v-on:click="loadMore()" >查看更多</div> 
      </ul>
      </div>
    </div>

    
 <div class="apply_list">
        <div class="headline">已报名(100)</div>
        <div class="content">
         <ul class="list">
            <li class="users_portrait" v-for="list in lists" @click="ToUserDetail($event)">
              
              <img src="~src/images/aimer.jpg" alt="">
            </li> 
          </ul>            
         </div>
      </div>
  <div>
  <div class="sponsor">
     <h2>
        <div class="header">主办方</div>
      </h2>
      <div class="introduce">
         <div class="images">
           <img src="~src/images/aimer.jpg" alt="">
         </div>
         <div class="describe">
           <div class="organization">世界通讯基金会</div>
           <div class="inner"> 由优客工场、标准排名联合主办的全球INS大会（World INS Conference）在北京正式启幕宣传。本次大会将聚焦中国众创空间行业。</div>
         </div>
      </div>
  </div>

  <div class="tip">
    
      温馨提示：本活动奖励由参展商提供，本次活动的最终解释权归参展商所有。
 
  </div>
  <footer>
    <div class="consult">
       <div class="iconfont icon-kefu"></div>
       <div class="word">咨询</div>
    </div>
    <div class="apply"  @click="shijianming">
      <!-- <router-link class="routerbox" to="user_apply"> -->
      <div class="iconfont icon-baoming1" ></div>
      <div class="sign">报名</div>
      <!-- </router-link> -->
    </div>
  </footer>
      
      </div>
      <div class="say">
    <mt-popup
      v-model="revert"  position="bottom" >
        <div class="left">
         <input type="text" v-model="write" id="" placeholder="请输入你的评论" v-bind:value="write" ref="feed_in">
        </div>
        <div class="right" v-on:click="reverts()">
           发送
        </div>

    </mt-popup>
</div>
    <mt-popup v-model="site" popup-transition="popup-fade"  >
      <div class="choice">
        <div class="bb">展位地图</div>
      </div>

    
    </mt-popup>
    <mt-popup v-model="gif" popup-transition="popup-fade">
      <div class="choice">
        <div class="caption">活动奖励</div>
        <ul v-show="rewardList">
          <li v-for=" item_26 in rewardList">{{item_26}}</li>
        </ul>
      </div>
    </mt-popup>

    <mt-popup  v-model="userDetail"  popup-transition="popup-fade" class="userDetail" >
     <div class="datum">
        <div class="inner">
          <div class="top">
             <div class="header">
               <div><img src="~src/images/aimer.jpg" alt=""></div>
             </div>
              <div class="detail">
                  <div><span>麦琪</span>业务经理</div>
                  <div>13956448576</div>
                  <div>广东省广州市番禺区大石会江丰晟工业园F栋4楼</div>
              </div>
          </div>
          <div class="bottom">深圳市艾科讯电脑技术有限公司</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import { Carousel, Scrollbar, CarouselItem } from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import { FindActivites_api }  from 'src/servise/getData' // 活动详情 真数据
import { FindActivitess } from 'src/testData/FindActivites'  //模拟的数据 ajax出来前别删  活动详情
import { commonList } from 'src/testData/FindActivites'  //模拟的数据 ajax出来前别删 评论列表
import { AddActivityComment_api }  from 'src/servise/getData'   //添加活动评论
import { SearchProductActivityComment }  from 'src/servise/getData'  //获取活动评论
import { RewardText_api } from 'src/servise/getData'; //获取奖励列表
import { ApplyPreVerify_api } from 'src/servise/getData';
import { comment_data } from 'src/servise/commentData'; // 评论数据 假数据
import { user_event_api } from 'src/servise/getData';
import { MessageBox } from 'mint-ui';
import Qs from 'Qs'

Vue.use(Carousel)
Vue.use(Scrollbar)
Vue.use(CarouselItem)

export default {
  data() {
    return {

      site: false,
      write:'123',
      gif: false,
      revert:false,
      items: "",
      newdata: '',
      loading:'',
      jsonData: {
        // "UserID": "1",//用户id
        // "Content": "",//内容
        // "ToUserID": "101",//评论某人的id
        // "ActivityID": 28//活动id
      },
      rewardList: [], // 奖励列表
      carouselData: {
        data: [
          { title: '活动时间', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'time' },
          { title: '活动地点', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'site' },
          { title: '活动奖励', content: '广州广交会展馆 A区2.1馆福特展台', sign: 'gif' }
        ]
      },
      userDetail:false,
      result:"",
      lists: [],

    }
  },

  created() {
    // 设置登录的操作的人

    sessionStorage._LoginID = '19851030';
    sessionStorage._ActivityID = 154;

    // 请求数据初始化
    this.$http.get(FindActivites_api, {params: {
      "Id": sessionStorage._ActivityID
    }}).then((res) => {
      this.result = res.data.Result;
      // console.log(this.result);
    });

    //初始化评论列表
    this.comment_init();

    //初始化奖励列表
    this.RewardList_init();
     
  },


  methods: {
    RewardList_init() {
      //初始化奖励列表
      let That = this
      console.log(RewardText_api+"?activityID="+sessionStorage._ActivityID);
      this.$http.get(RewardText_api, {params: {
        "activityID": sessionStorage._ActivityID
      }}).then((res) => {
        console.log("初始化奖励列表-start");
        console.log(res.data.Result);
        That.rewardList = res.data.Result;
        console.log("初始化奖励列表-end");
      });
     
    },
    comment_init() {
      // 初始化评论列表
      console.log(SearchProductActivityComment+"?Id="+sessionStorage._ActivityID+"&pageIndex=1&pageSize=100");
      this.$http.get(SearchProductActivityComment,{params: {
        "Id": sessionStorage._ActivityID,
        "pageIndex": 1,
        "pageSize":100
      }}).then((res) => {
       console.log("初始化评论列表-start");
        if (res.data.ErrorCode != 0) {
          return MessageBox.alert(res.data["ErrorMessage"]);
        }
        console.log(res);
        this.lists = res.data.Result;
        console.log("初始化评论列表-end");
      });
      
    },
    loadMore_img() {
      // 富文本 查看更多
      console.log(this.$refs.editor_text.classList.toggle("is-show-all"));
    },
    loadMore() {
      this.lists = this.lists.concat(comment_data);
      console.log(this.lists);
      //this.lists.push(comment_data);
    //       console.log(111);
    //  this.loading = true;
    //   setTimeout(() => {
    //     let that = this;
    //     this.$http.get( user_event_api ).then(
    //       (res) =>that.newdata=res.data.data
    //       )
    //         this.items = this.items.concat(this.newdata);
    //   }, 500);
    },

    handleClick: function(item) {
      if (item == 'site') {
        this.site = true
      } else if (item == 'gif') {
        this.gif = true
      }
    } ,   //v-on的方法里面可以传入  v-for 里面的item的值 
  
    reverts :function(event, _ToNameId){
      //发表评论
      if(this.revert==true){
          this.revert = false;

          // console.log(this.write);

          this.jsonData["Content"] = this.write; //评论内容
          //console.log(this.jsonData);
          // 在vue我们不需要获得某个元素和插入某个元素 
          // 直接把他加入到数据中  通过v-for显示出来
          let That = this;
          this.$http.post(AddActivityComment_api, Qs.stringify({"":JSON.stringify(That.jsonData)})).then((res) => {
            if(res.data.ErrorCode != 0){
              return MessageBox.alert(res.data["ErrorMessage"]);
            }
            console.log
            //发表评论后 重新得到评论数据列表 进行渲染
            That.comment_init();
          });
      }else{
        //如果被评论人的ID存在
        if(_ToNameId){ 
          //被评论人的ID
           this.jsonData["ToUserID"] = _ToNameId;  
        }
        // 当前评论的活动的ID
        this.jsonData["ActivityID"] = sessionStorage._ActivityID; 
        //发表评论的人的ID
        this.jsonData["UserID"] = sessionStorage._LoginID; 
         this.revert = true;
         this.write='';
      }
    },
    ListsMore:function(){
      let that=this;
      this.$http.get(user_event_api)
      .then(
        (res) => {
          that.items=res.data.data;

        }
      )  
    },
    ToUserDetail(){
      this.userDetail=true;
    },
        shijianming(){
          console.log(123)
      let that=this; 
      this.$http.post(ApplyPreVerify_api,
      Qs.stringify({
        "ActivityID": sessionStorage._ActivityID,
        "OpenId": sessionStorage._LoginID,
        "Token": "令牌都是假的",
        "appSecret": "appSecret"
      })).then((res) => {
        console.log(res)
      if(res.data["ErrorCode"] != 0){
        MessageBox.alert(res.data["ErrorMessage"]);
        return;
      }
      this.$router.push({ path: "/user_apply" });
      // this.$router.push({ path: "/user_apply" },{params: { "ActivityID": 7 }});
  }) 
    }

  }
}
</script>
<style lang="stylus" scoped>

  @import './icon/iconfont.css';
  .mint-cell:first-child .mint-cell-wrapper {
    border-bottom 1px solid red
  }
  .is-show-all
    height auto!important
  .editor_text
    overflow hidden
    height 300px
    img
      width 100%!important

  .head_first
    background-color #ffffff
    padding-bottom 8px
 
   .event_detailss
    .mint-popup-right
      width 100%
      height 100%
      border-radius 0

     .pictrue
      height 200px
      img 
        width 100%
        height 100%
    .title
      padding 0 15px
      background-color #ffffff
      margin-top 9px
      h2  
        font-size 17px
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        font-weight bold
        line-height: 22px;
      .participation
        display flex
        div
          font-size 12px
          flex 1
          display flex
          
          align-items center
          color #999999
          margin-top 6px
        div:nth-child(1)
          padding-left 6px
        div:nth-child(2) 
          font-size 12px
          flex 1
          display flex
          justify-content center
          align-items center
          color #999999
          margin-top 5px
        div:nth-child(3)
          justify-content flex-end
          padding-right 12px
        .iconfont
          font-size 11px
          margin-right 3px
          padding-top 2px

     .carousel{
      padding 10px 5px
      background-color: #ffffff;
      margin-top 7px
     
    }
   
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
     
   
    .el-carousel__item:nth-child(1) 
      background url('~src/images/greenBack.png')
      background-size 100% 100%
      
    
    .el-carousel__item:nth-child(2) 
     background url('~src/images/oringeBack.png')
     background-size 100% 100%
    .el-carousel__item:nth-child(3) 
      background url('~src/images/blueBack.png')
      background-size 100% 100%
    .el-carousel__mask
      position relative
    .nini
      padding 0 20px
  
      .ico  
        display flex
        justify-content center
        align-items center
        padding-top 10px
        .iconfont
          color #ffffff
          font-size 30px
      .subtitle 
        font-size 17px
        text-align center
        color #ffffff
        margin-top 6px
        
      .content
        font-size 15px
        color #ffffff
        overflow hidden
        text-overflow ellipsis     
        display  -webkit-box
        -webkit-box-orient vertical
        -webkit-line-clamp 2
        margin-top 5px
        padding-left 2px
        text-align: center;
      .examine
        color #ffffff
        font-size 14px
        position absolute
        bottom 15px
        width 100%
        transform translateX(-20px)
        text-align center
    // 评论
   .mint-popup   
      width 90%
      border-radius 6px
      height 30%
      font-size 14px
      padding 10px 15px
      .caption
         font-size 14px
      ul
        margin-top 5px
        li
          font-size 14px
          line-height 22px
          // 评论start
  .comment
  
    background-color #ffffff
    margin-top 7px
    h2  
      font-size 15px
      height 40px
      display flex
      align-items center
      border-bottom 1px solid #E5E5E5
      padding 0 12px
      .right
        width 70px
      .left
        flex 1
        display flex
        justify-content flex-end
        // 上面的图片和文字直接用文字来合并
    .review
       overflow scroll
       // height 500px
       .users
          display flex
          margin-top 6px
          border-bottom 1px solid #E5E5E5
          padding 0 12px
          .head   
            margin-top 4px
            width 44px 
            height 44px
            img 
              width 100%
              height 100%
          .content    
            flex 1
            padding-left 6px
            padding-bottom: 8px;
            .user_name
              font-size 14px
              color #2A96F5
            .inner
              .word
                font-size 14px
                line-height 20px
                margin-top 2px
                .to-name
                  color #2a96f5
              .say_time
                font-size 12px
                margin-top 6px
                color #999999
              .reply
                margin-top 10px
                background-color #F9F9F9
                
                
                .exclusive:last-child
                  border none
                .exclusive
                  line-height 24px
                  padding-top 4px
                  padding-left 4px
                  border-bottom 1px solid #E5E5E5  
                  div 
                    font-size 13px
                    color #999999
                  
                    span 
                      color #2B98F1
                      font-size 13px
                    .mark
                      background-color #2B98F1
                      color #ffffff
                      padding 0px 2px
                      padding-top 2px
                      border-radius 3px
  .check_more
    text-align center
    color #EF5B49  
    font-size 14px
    line-height 38px
    height 35px
      
  .apply_list
    margin-top 8px
    background-color #ffffff
    
    .headline
      font-size 15px
      padding-left 12px
      line-height 40px
      border-bottom 1px solid #E5E5E5
    .content
      overflow scroll     
      padding 10px 10px
      .list
        width:100%;
        display: inline;
        white-space: nowrap;
        overflow-x:scroll;
        float:left;
        overflow-y:hidden
        height 54px
        .users_portrait
          margin-right 4px
          height 54px
          width 54px
          display:inline-block;
          img
            width 100%
            height 100%
  .say
    .mint-popup
      height auto
      padding 0
      border-radius 0
      width 100%
      padding 8px 0px 8px 15px
      display flex
      background-color #E5E5E5
      .left 
          flex 1
        input
          height 30px
          border 1px solid #999
          width 100%
          border-radius: 5px;
          font-size 16px
          padding-left 4px
      .right 
          width 58px
          display flex 
          justify-content center
          align-items center
          color #2A96F5
  .sponsor
    margin-top 8px
    background-color #ffffff
   
    .header
      font-size 15px
      height 40px
      line-height 40px
      padding-left 12px
      border 1px solid  #E5E5E5
    .introduce
      padding 10px 12px
      display flex

      .images
        height 100px 
        width 100px
        img
         height 100%
         width 100%
       
      .describe
        flex 1
        padding-left 11px
        .organization 
           height 25px
           font-size 15px
           color #2A96F5
        .inner
          height 75px
          font-size 13px 
          color #666666
  .tip
    margin-top 15px
    padding 0 12px
    font-size 12px
    color #666666
    margin-bottom 70px
    
  footer
    display flex
    bottom 0
    width 100%
    height 50px
   
    .consult
      flex 2
      background-color  #00C9C2
      padding-top: 6px;
      .iconfont
        font-size 12px
        text-align center
        font-size: 22px;
        color: #ffffff;
      .word
        font-size 12px
        text-align center
        color: #ffffff;
    .apply
      flex 3
      background-color #2A96F5
      padding-top: 6px;
      .iconfont
        font-size 12px
        text-align center
        font-size: 22px;
        color: #ffffff;
        padding-left 2px
      .sign
        font-size 12px
        text-align center
        color: #ffffff;

  .datum
    background none
  
    .inner
      background-color #E05362
      height 155px
      border-radius 6px
      padding 12px 12px
      position relative
      .top
        display flex
        .header
          width 80px
        
          div 
            width 80px
            height 80px
            img
              width 100%
              height 100%
    .bottom 
      font-size 13px
      text-align center
      color #FFCC91
      position absolute
      bottom 8px
      width 100%

    .detail
      flex 1
      font-size 14px
      color #fff
      padding-left 14px
      div:first-child
          margin-top 0
      div
        color #fff
        margin-top 3px
        span
          font-size 23px
          color #fff
          margin-right 6px   
    #details
       overflow scroll
       height 300px
       position relative 
       padding-bottom: 50px;

       .users
          display flex
          margin-top 6px
          border-bottom 1px solid #E5E5E5
          padding 0 12px
          .head   
            margin-top 4px
            width 44px 
            height 44px
            img 
              width 100%
              height 100%
          .content    
            flex 1
            padding-left 6px
            padding-bottom: 8px;
        #check_more
          text-align: center;
          color: #ef5b49;
          font-size: 14px;
          line-height: 38px;
          height: 35px;
          position absolute
          bottom 0
          width 100%
          background-color #fff

</style>

<style lang="stylus" >
.mint-switch-core
      width 35px
      height 21px
    .mint-switch-core::before
      width 33px
      height 19px
    .mint-switch-core::after
      width 19px
      height 19px
    .mint-switch-input:checked + .mint-switch-core
      border-color: #2A96F5;
      background-color: #2A96F5;
  .mint-switch-input:checked + .mint-switch-core::after {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}
.event_detailss
   .userDetail 
       top 30%
       padding 0 0 
       height auto 
   

</style>